<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title id="title">新能源车联网综合大数据平台</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/map.css">

</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=H3FBZ-5MMKJ-HEDFW-D6NFK-46AZ6-LPBUE"></script>
<style>
    /* AB模版网 做最好的织梦整站模板下载网站 Www.AdminBuy.Cn */
    /* QQ：9490489 */
    /* 仿站：Fang.AdminBuy.Cn */
    /* 素材：Sc.AdminBuy.Cn */
    /* js特效：Js.AdminBuy.Cn */
    @import url("https://fonts.googleapis.com/css?family=Share+Tech+Mono");

    html, body {
        height: 100%;
    }

    body {
        background: #0f3854;
        background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
        background-size: 100%;
    }

    p {
        margin: 0;
        padding: 0;
    }

    #clock {
        font-family: "Share Tech Mono", monospace;
        color: #ffffff;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #daf6ff;
        text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
    }

    #clock .time {
        letter-spacing: 0.05em;
        font-size: 80px;
        padding: 5px 0;
    }

    #clock .date {
        letter-spacing: 0.1em;
        font-size: 24px;
    }

    #clock .text {
        letter-spacing: 0.1em;
        font-size: 12px;
        padding: 20px 0 0;
    }

    #container {
        width: 100%;
        height: 77%;
    }

    #info {
        position: absolute;
        right: 30px;
        bottom: 350px;
        background: #FFF;
        width: 260px;
        height: 80px;
        padding: 10px;
        border-radius: 3px;
        opacity: 0.5;
        font-weight: 500;
    }

    input {
        position: absolute;
        left: 30px;
        top: 30px;
        z-index: 9999;
    }

    .cen-bottom {
        width: 100%;
        height: 25%;
        background-color: rgba(0, 24, 106, 0.5);
        border: 1px solid #20558b;
        box-sizing: border-box;
        position: relative;
        top: -10px;
    }
</style>
<body>
<div class="data">

    <div class="data-title">
        <div class="title-left fl"></div>
        <div id="company" style="font-size: 30px;color: white;width: 430px;float: left;text-align: center"></div>
        <div class="title-right fr"></div>
    </div>
    <div class="data-content">
        <div class="con-left fl">
            <div class="left-top">
                <div class="info">
                    <div class="info-title">实时统计</div>
                    <img src="img/bj-1.png" alt="" class="bj-1">
                    <img src="img/bj-2.png" alt="" class="bj-2">
                    <img src="img/bj-3.png" alt="" class="bj-3">
                    <img src="img/bj-4.png" alt="" class="bj-4">
                    <div class="info-main">
                        <div class="info-1">
                            <div class="info-img fl">
                                <img src="img/info-img-1.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>运输中的车辆</p>
                                <p id="run">0</p>
                            </div>
                        </div>
                        <div class="info-2">
                            <div class="info-img fl">
                                <img src="img/info-img-2.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>今日总运单</p>
                                <p id="bill">0</p>
                            </div>
                        </div>
                        <div class="info-3">
                            <div class="info-img fl">
                                <img src="img/info-img-3.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>待审核运单</p>
                                <p id="audit">0</p>
                            </div>
                        </div>
                        <div class="info-4">
                            <div class="info-img fl">
                                <img src="img/info-img-4.png" alt="">
                            </div>
                            <div class="info-text fl">
                                <p>待结算运单</p>
                                <p id="settled">0</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="top-bottom">
                    <div class="title">行业分类</div>
                    <div id="echarts_1" class="charts"></div>
                </div>
            </div>
            <div class="left-bottom">
                <div class="title">近一周运单支出金额（元）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_2" class="charts"></div>
            </div>
        </div>
        <div class="con-center fl">
            <div class="map-num">
                <p>实时行驶车辆(辆)</p>
                <div id="car">
                </div>
            </div>
            <div id="clock"
                 style="float: right;font-weight: 600;margin-top: 20px; position: absolute;z-index: 100;top: 20px;right: 10px;">
                <p class="date">{{ date }}</p>
                <p class="time" style="font-size: 25px;">{{ time }}</p>
            </div>
            <div class="cen-top" id="container">

            </div>
            <div id="info" style="display: none;color: darkblue;font-size: 14px;">
                <h4 id="txt"></h4>
                <p id="markerid"></p>
                <p id="position"></p>
            </div>
            <div class="cen-bottom">
                <div class="title">近一月运单数据（单）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_3" class="charts"></div>
            </div>
        </div>
        <div class="con-right fr">
            <div class="right-top">
                <div class="title">半年发货量（吨）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_4" class="charts"></div>
            </div>
            <div class="right-center">
                <div class="title">月度运单排比（单）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_5" class="charts"></div>
            </div>
            <div class="right-bottom">
                <div class="title">月度运单金额排比（元）</div>
                <img src="img/bj-1.png" alt="" class="bj-1">
                <img src="img/bj-2.png" alt="" class="bj-2">
                <img src="img/bj-3.png" alt="" class="bj-3">
                <img src="img/bj-4.png" alt="" class="bj-4">
                <div id="echarts_6" class="charts"></div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/echarts.js"></script>
<script src="js/vue.min.js"></script>
</html>
<script>
    $(function () {
        // addClick()
        $('#info').show();
        $('#info').css("opacity", "0.5");
        // txt.innerHTML = "车辆信息";
        //监听marker点击事件
        marker.on("click", eventClick)
        var user_id = getUrlParam('user_id');
        $.post(
            "http://ah.zhgylgl.com/api/public/index.php/houtai/api/getDataCompany",
            {
                user_id: user_id
            },
            function (msg) {
                if (msg.status == 1) {
                    $('#company').html(msg.data.company);
                    $('#title').html(msg.data.company);
                    $('#run').html(msg.data.running);
                    $('#bill').html(msg.data.bill);
                    $('#audit').html(msg.data.audit);
                    $('#settled').html(msg.data.settled);
                    var html = '<span style="display: none">1</span>\n' +
                        '<span style="display: none">1</span>';
                    $.each(msg.data.car_number, function (i, v) {
                        html += '<span>' + v + '</span>'
                    })
                    $('#car').append(html);
                } else {
                    alert(1);
                }

            });
    })

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }
</script>
<script>
    var clock = new Vue({
        el: '#clock',
        data: {
            time: '',
            date: ''
        }
    });

    var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var timerID = setInterval(updateTime, 1000);
    updateTime();

    function updateTime() {
        var cd = new Date();
        clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
        clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
    };

    function zeroPadding(num, digit) {
        var zero = '';
        for (var i = 0; i < digit; i++) {
            zero += '0';
        }
        return (zero + num).slice(-digit);
    }
</script>
<script>
    //监听marker点击事件

    var txt = document.getElementById("txt");
    var markerID = document.getElementById("markerid");

    var position = document.getElementById("position");

    var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
    //初始化地图
    var map = new TMap.Map("container", {
        center: center,
        mapStyleId: 'style1'
    });

    function getData() {
        var json = null;
        $.get(
            "http://ah.zhgylgl.com/api/public/index.php/api/action/getCarlist",
            {
                user_id: 1
            },
            function (msg) {

                var json = JSON.parse(msg);
                $.each(json, function (key, value) {  //遍历键值对
                    json[key]['position'] = new TMap.LatLng(value.lng, value.lat)
                })
                getMapPosition(json);

            });
        return json
    }

    var markerArr = [{
        "id": "marker1",
        "styleId": 'marker',
        "position": new TMap.LatLng(39.954104, 116.457503),
        "properties": {
            "title": "marker1"
        }
    }, {
        "id": "marker2",
        "styleId": 'marker',
        "position": new TMap.LatLng(31.794104, 121.287503),
        "properties": {
            "title": "marker2"
        }
    }, {
        "id": "marker3",
        "styleId": 'marker',
        "position": new TMap.LatLng(29.984104, 106.307503),
        "properties": {
            "title": "marker3"
        }
    }

    ];

    //初始化marker
    var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
            "marker": new TMap.MarkerStyle({
                "width": 25,
                "height": 35,
                "anchor": {x: 16, y: 32},
                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png'
            })
        },
        geometries: markerArr
    });
    //初始化
    var bounds = new TMap.LatLngBounds();
    //判断标注点是否在范围内
    markerArr.forEach(function (item) {
        //若坐标点不在范围内，扩大bounds范围
        if (bounds.isEmpty() || !bounds.contains(item.position)) {
            bounds.extend(item.position);
        }
    })
    //设置地图可视范围
    map.fitBounds(bounds, {
        padding: 300 // 自适应边距
    });


    //监听回调函数（非匿名函数）
    var eventClick = function (evt) {
        markerID.innerHTML = "运单号:" + evt.geometry.id;
        position.innerHTML = "当前车辆位置：" + evt.geometry.position.toString();
    }

    function addClick() {
        $('#info').css("opacity", "0.5");
        txt.innerHTML = "车辆信息";
        //监听marker点击事件
        marker.on("click", eventClick)
    }

    function removeClick() {
        txt.innerHTML = "解绑点击事件";
        //移除绑定事件
        marker.off("click", eventClick);
    }


</script>
<!--
<script>

    var center = new TMap.LatLng(39.984104, 116.307503);//设置中心点坐标
    //初始化地图
    var map = new TMap.Map("container", {
        center: center,
        mapStyleId: 'style1'
    });
    var markerArr = [{
        "id": "marker1",
        "styleId": 'marker',
        "position": new TMap.LatLng(39.954104, 116.457503),
        "properties": {
            "title": "marker1"
        }
    }, {
        "id": "marker2",
        "styleId": 'marker',
        "position": new TMap.LatLng(31.794104, 121.287503),
        "properties": {
            "title": "marker2"
        }
    }, {
        "id": "marker3",
        "styleId": 'marker',
        "position": new TMap.LatLng(29.984104, 106.307503),
        "properties": {
            "title": "marker3"
        }
    }

    ];
    //初始化marker
    var marker = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        styles: {
            "marker": new TMap.MarkerStyle({
                "width": 25,
                "height": 35,
                "anchor": {x: 16, y: 32},
                "src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png'
            })
        },
        geometries: markerArr
    });
    //初始化
    var bounds = new TMap.LatLngBounds();

    //设置自适应显示marker

    //判断标注点是否在范围内
    markerArr.forEach(function (item) {
        //若坐标点不在范围内，扩大bounds范围
        if (bounds.isEmpty() || !bounds.contains(item.position)) {
            bounds.extend(item.position);
        }
    })
    //设置地图可视范围
    map.fitBounds(bounds, {
        padding: 300 // 自适应边距
    });
    ;


</script>-->
